<template>
  <div id="weeklyPlanItem">
    <div class="weeklyPlanItemBtn flex">
      <div>
        <el-button type="primary" icon="el-icon-back" @click="sendKey(1)"
          >返回</el-button
        >
      </div>
    </div>
    <div ref="weeklyPlanItem">
      <div class="weeklyPlanItemTable">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{
            color: '#F5F7FA',
            'text-align': 'center',
            'background-color': '#e8e8e8',
          }"
          header-row-class-name="weeklyPlanItemTableHeader"
        >
          <el-table-column
            align="center"
            prop="workDate"
            label="作业日期"
            width="150"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="applyOrgName"
            label="施工单位"
            width="150"
          >
          </el-table-column>

          <el-table-column
            align="center"
            prop="workPersonNum"
            label="作业人数"
            width="80"
          >
            <template slot-scope="scope">
              <span style="color: rgb(252, 202, 0)">
                {{ scope.row.workPersonNum }}</span
              >
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            prop="workDate"
            label="作业时间"
            width="110"
          >
          </el-table-column>
          <el-table-column prop="workRegion" label="作业区域">
          </el-table-column>
          <el-table-column align="center" prop="workContent" label="作业内容">
          </el-table-column>
          <el-table-column
            align="center"
            prop="sfkxgcc"
            label="是否开行工程车"
            width="110"
          >
            <template slot-scope="scope">
              <span style="color: #1890ff"> {{ scope.row.sfkxgcc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="qxcl"
            label="轻型车辆或梯车等"
            width="110"
          >
            <template slot-scope="scope">
              <span style="color: #1890ff"> {{ scope.row.qxcl }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="tsdxq"
            label="停、送电需求"
            width="110"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="tsdfw"
            label="停、送电范围"
            width="110"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xcaqy"
            label="现场安全员"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="xcfzr"
            label="负责人及电话"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            label="备注"
            width="100"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="weeklyPlanItemTable" style="margin-top: 3rem">
        <el-table
          :data="tableData2"
          stripe
          style="width: 100%"
          :header-cell-style="{
            color: '#F5F7FA',
            'text-align': 'center',
            'background-color': '#e8e8e8',
          }"
          header-row-class-name="weeklyPlanItemTableHeader"
        >
          <el-table-column align="center" prop="applyTime" label="申请时间">
          </el-table-column>
          <el-table-column
            align="center"
            prop="firstApproveTime"
            label="一级审批时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="secondApproveTime"
            label="二级审批时间"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="thirdApproveTime"
            label="作业时间"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getweekPlanById } from "/src/http/productSchedule/weekPlan.js";

export default {
  props: ["getKey", "weekId"],
  data() {
    return {
      tableData: [],
      tableData2: [],
    };
  },
  components: {},
  created() {},
  mounted() {
    this.initialize();
  },
  methods: {
    sendKey() {
      this.getKey(1);
    },
    printme() {
      this.$print(this.$refs.weeklyPlanItem);
    },
    async initialize() {
      try {
        await getweekPlanById({ id: this.weekId }).then((res) => {
          res.data.weekPlanDetailList[0].applyOrgName = res.data.applyOrgName;
          res.data.weekPlanDetailList[0].weekRange = res.data.weekRange;
          console.log(res.data);
          this.tableData = res.data.weekPlanDetailList;
          res.data.weekPlanDetailList.forEach((item) => {
            if (!item.applyOrgName) {
              item.applyOrgName = res.data.weekPlanDetailList[0].applyOrgName;
            }
          });
          this.tableData2 = [res.data];
        });
      } catch (error) {
        console.log("接口调用出错::: ", error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
#weeklyPlanItem {
  .weeklyPlanItemFrom {
    margin-left: 3rem;
  }
  .weeklyPlanItemFromTitle {
    font-size: 14px;
    padding: 0 1rem;
    font-weight: 600;
  }
  .weeklyPlanItemBtn {
    margin: 1rem 4rem;
  }
  .weeklyPlanItemTable {
    width: 95%;
    margin: 0 auto;
  }
  .weeklyPlanItemweeklyPlanItem {
    position: absolute;
    bottom: 5rem;
    right: 5rem;
  }
}
</style>
<style lang="less"></style>
